<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务列表</title>
    <script src="/js/vue.js " type="text/javascript" charset="utf-8"></script>
    <script src="/js/element.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/css/element.css" />
    <script src="/js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
   <div id="app">

       <el-dialog title="缺陷详情" :visible.sync="dialogFormVisible">
           <el-form :model="form">
               <div>项目名：{{showIssue.projectName}}</div>
               <div>父级缺陷：{{showIssue.parentIssueId}}</div>
               <div>缺陷名称：{{showIssue.issueName}}</div>
               <div>缺陷分类：{{showIssue.issueType}}      状态：{{showIssue.issueState}}</div>
               <div>严重程度：{{showIssue.issueSeverity}}      优先级：{{showIssue.issuePriority}}</div>
               <div>预计工时：{{showIssue.planWorkHours}}     完成率：{{showIssue.doneRatio}}</div>
               <div>计划开始时间：{{showIssue.planStartTime}}      计划完成时间：{{showIssue.planEndTime}}</div>
               <div>缺陷描述：{{showIssue.issueDesc}}</div>
               <div>缺陷要求：{{showIssue.doneCondition}}</div>
           </el-form>
           <div slot="footer" class="dialog-footer">
               <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
           </div>
       </el-dialog>

       <el-dialog title="新增缺陷" @close="addclose" :visible.sync="dialogFormVisible1">
           <el-form :model="form">
              <div>项目名称：<el-select v-model="addItem.projectId" clearable placeholder="请选择">
                  <el-option
                          v-for="project in projects"
                          :label="project.projectName"
                          :value="project.projectId">
                  </el-option>
              </el-select>
              </div>
               <div>父级缺陷：<el-select v-model="addItem.parentIssueId" clearable placeholder="请选择">
                   <el-option
                           v-for="item in issues"
                           :label="item.issueName"
                           :value="item.issueId">
                   </el-option>
               </el-select>
               </div>
               <div>
                   缺陷名称：<el-input v-model="addItem.issueName" @blur="checkIssueName" placeholder="请输入内容"></el-input>

               </div>
               <div>
                   缺陷描述：<el-input
                       type="textarea"
                       :rows="2"
                       placeholder="请输入内容"
                       v-model="addItem.issueDesc">
               </el-input>
               </div>
               <div>
                   缺陷要求：<el-input
                       type="textarea"
                       :rows="2"
                       placeholder="请输入内容"
                       v-model="addItem.doneCondition">
               </el-input>
               </div>
               <div>
                   缺陷分类：<el-select v-model="addItem.issueType" clearable placeholder="请选择">
                   <el-option
                           v-for="item in issueType"
                           :label="item.typeCode"
                           :value="item.typeCode">
                   </el-option>
               </el-select>
                   严重程度：<el-select v-model="addItem.issueSeverity" clearable placeholder="请选择">
                   <el-option
                           v-for="item in severitys"
                           :label="item.severityCode"
                           :value="item.severityCode">
                   </el-option>
               </el-select>
                 </div>
               <div>
                   优先级：
                   <el-select v-model="addItem.issuePriority" clearable placeholder="请选择">
                       <el-option
                               v-for="item in prioritys"
                               :label="item.priorityCode"
                               :value="item.priorityCode">
                       </el-option>
                   </el-select>
               </div>
               <div >
                   预计工时:<el-input  v-model="addItem.planWorkHours" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
                                  maxlength="4"></el-input>
               </div>
               <div>
                   <span class="demonstration">计划时间：</span>
                   <el-date-picker
                           v-model="addItem.planStartTime"
                           type="date"
                           placeholder="开始日期"
                           format="yyyy-MM-dd"
                           value-format="yyyy-MM-dd">
                   </el-date-picker>-
                   <span class="demonstration"></span>
                   <el-date-picker
                           v-model="addItem.planEndTime"
                           type="date"
                           placeholder="结束日期"
                           format="yyyy-MM-dd"
                           value-format="yyyy-MM-dd">
                   </el-date-picker>
               </div>
           </el-form>
           <div slot="footer" class="dialog-footer">
               <el-button type="primary" @click="cancealadd">取消</el-button>
               <el-button type="primary" @click="commitAdd">确定</el-button>
           </div>
       </el-dialog>

       <el-dialog title="修改缺陷" @close="changeclose" :visible.sync="dialogFormVisible2">
           <el-form :model="form">
               <div>项目名称：<el-select v-model="changeItem.projectId" clearable placeholder="请选择">
                   <el-option
                           v-for="project in projects"
                           :label="project.projectName"
                           :value="project.projectId">
                   </el-option>
               </el-select>
               </div>
               <div>父级缺陷：<el-select v-model="changeItem.parentIssueId" clearable placeholder="请选择">
                   <el-option
                           v-for="item in issues"
                           :label="item.issueName"
                           :value="item.issueId">
                   </el-option>
               </el-select>
               </div>
               <div>
                   缺陷名称：<el-input v-model="changeItem.issueName"  placeholder="请输入内容"></el-input>

               </div>
               <div>
                   缺陷描述：<el-input
                       type="textarea"
                       :rows="2"
                       placeholder="请输入内容"
                       v-model="changeItem.issueDesc">
               </el-input>
               </div>
               <div>
                   缺陷要求：<el-input
                       type="textarea"
                       :rows="2"
                       placeholder="请输入内容"
                       v-model="changeItem.doneCondition">
               </el-input>
               </div>
               <div>
                   缺陷分类：<el-select v-model="changeItem.issueType" clearable placeholder="请选择">
                   <el-option
                           v-for="item in issueType"
                           :label="item.typeCode"
                           :value="item.typeCode">
                   </el-option>
               </el-select>
                   严重程度：<el-select v-model="changeItem.issueSeverity" clearable placeholder="请选择">
                   <el-option
                           v-for="item in severitys"
                           :label="item.severityCode"
                           :value="item.severityCode">
                   </el-option>
               </el-select>
               </div>
               <div>
                   优先级：
                   <el-select v-model="changeItem.issuePriority" clearable placeholder="请选择">
                       <el-option
                               v-for="item in prioritys"
                               :label="item.priorityCode"
                               :value="item.priorityCode">
                       </el-option>
                   </el-select>
               </div>
               <div >
                   预计工时:<el-input  v-model="changeItem.planWorkHours" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
                                   maxlength="4"></el-input>
               </div>
               <div>
                   <span class="demonstration">计划时间：</span>
                   <el-date-picker
                           v-model="changeItem.planStartTime"
                           type="date"
                           placeholder="开始日期"
                           format="yyyy-MM-dd"
                           value-format="yyyy-MM-dd">
                   </el-date-picker>-
                   <span class="demonstration"></span>
                   <el-date-picker
                           v-model="changeItem.planEndTime"
                           type="date"
                           placeholder="结束日期"
                           format="yyyy-MM-dd"
                           value-format="yyyy-MM-dd">
                   </el-date-picker>
               </div>
           </el-form>
           <div slot="footer" class="dialog-footer">
               <el-button type="primary" @click="cancealchange">取消</el-button>
               <el-button type="primary" @click="commitChange">确定</el-button>
           </div>
       </el-dialog>


       <div>
           筛选查询：
           <span class="demonstration">登记时间：</span>
           <el-date-picker
                   v-model="searchItems.planStartTime"
                   type="date"
                   placeholder="开始日期"
                   format="yyyy-MM-dd"
                   value-format="yyyy-MM-dd">
           </el-date-picker>-
           <span class="demonstration"></span>
           <el-date-picker
                   v-model="searchItems.planEndTime"
                   type="date"
                   placeholder="结束日期"
                   format="yyyy-MM-dd"
                   value-format="yyyy-MM-dd"
           >
           </el-date-picker>
           项目
           <el-select v-model="searchItems.projectName" clearable placeholder="请选择">
               <el-option
                       v-for="project in projects"
                       :label="project.projectName"
                       :value="project.projectName">
               </el-option>
           </el-select>
           状态
           <el-select v-model="searchItems.issueState" clearable placeholder="请选择">
               <el-option
                       v-for="state in states"
                       :label="state.stateCode"
                       :value="state.stateCode">
               </el-option>
           </el-select>

           <el-button type="primary" @click="loadpage">查询</el-button>
           <el-button type="primary" @click="dialogFormVisible1 = true">新增</el-button>
           <el-button type="primary" @click="delArray">删除</el-button>
       </div>
       <div>
           <el-table
                   ref="multipleTable"
                   :data="tableData"
                   tooltip-effect="dark"
                   style="width: 100%"
                   @selection-change="handleSelectionChange">
               <el-table-column
                       type="selection"
                       width="55">
               </el-table-column>
               <el-table-column
                       prop="issueId"
                       label="缺陷编号">
               </el-table-column>

               <el-table-column
                       prop="projectName"
                       label="项目名">
               </el-table-column>
               <el-table-column
                       prop="issueName"
                       label="缺陷名">
               </el-table-column>
               <el-table-column
                       prop="parentIssueId"
                       label="上级缺陷">
               </el-table-column>
               <el-table-column
                       prop="issuePriority"
                       label="优先级">
               </el-table-column>
               <el-table-column
                       prop="issueSeverity"
                       label="严重程度">
               </el-table-column>
               <el-table-column
                       prop="issueState"
                       label="状态">
               </el-table-column>
               <el-table-column
                       prop="assignee"
                       label="指派">
               </el-table-column>
               <el-table-column
                       :formatter="formatDate"
                       prop="planEndTime"
                       label="计划完成时间">
               </el-table-column>
               <el-table-column label="操作">
                   <template slot-scope="scope">

                       <div v-if="scope.row.issueState=='未指派'">
                           <el-button size="mini" @click="changeTask(scope.row)">修改</el-button>/
                           <el-button size="mini" @click="delTask(scope.row.issueId)">删除</el-button>
                       </div>
                       <div v-else>
                           <el-button size="mini" @click="open(scope.row)">查看</el-button>
                       </div>
                   </template>
               </el-table-column>

           </el-table>

           <div >
               <el-pagination
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="pageSizes"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
               </el-pagination>
           </div>
       </div>

   </div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            changeItem:{
                projectId:"",
                parentIssueId:"",
                issueName:"",
                issueDesc: "",
                doneCondition: "",
                issueType: "",
                issueSeverity: "",
                issuePriority: "",
                planWorkHours: "",
                planStartTime:"",
                planEndTime:""
            },
            addItem:{
                projectId:"",
                parentIssueId:"",
                issueName:"",
                issueDesc: "",
                doneCondition: "",
                issueType: "",
                issueSeverity: "",
                issuePriority: "",
                planWorkHours: "",
                planStartTime:"",
                planEndTime:""
            },
            searchItems:{
              planStartTime:"",
              planEndTime: "",
              projectName:"",
              issueState:""
            },
            currentPage:1,
            pageSizes:[3,6,9,12],
            pageSize:3,
            total:"",
            tableData: [],
            multipleSelection: [],
            projects:[],
            states:[],
            showIssue:{projectName:"",
                parentIssueId:"",
                issueName:"",
                issueType:"",
                issueState:"",
                issueSeverity:"",
                issuePriority:"",
                planWorkHours:"",
                doneRatio:"",
                planStartTime:"",
                planEndTime:"",
                issueDesc:"",
                doneCondition:""
            },
            dialogFormVisible: false,
            dialogFormVisible1: false,
            dialogFormVisible2: false,
            issues:[],
            issueType:[],
            severitys:[],
            prioritys:[],
            changeRow:null
        },
        methods:{
            equalsObj(obj1,obj2){
                return JSON.stringify(obj1)==JSON.stringify(obj2);
            },
            commitChange(){
                var _this = this
                if(_this.equalsObj(_this.changeRow,_this.changeItem)){
                    alert("未做修改");
                }else{
                    if (_this.changeItem.projectId==""){
                        alert("项目名不能为空");
                    }else if (_this.changeItem.issueName==''){
                        alert("缺陷名不能为空");
                    }else{
                        $.get("/checkIssueName",{issueName:this.changeItem.issueName},function (data) {
                            if (data.code=="200"){
                                $.get("/changeBaseInfo",_this.changeItem,function (data) {
                                _this.dialogFormVisible2=false;
                                _this.loadpage();
                            })
                            }else{
                                alert("缺陷名重复");
                            }
                        })
                    }
                }
            },
            changeTask(obj){
                this.changeRow=obj;
                this.changeItem=Object.assign({},obj);
                this.dialogFormVisible2=true
           },
            commitAdd(){
                var _this = this
                if (_this.addItem.projectId==""){
                    alert("项目名不能为空");
                }else if (_this.addItem.issueName!=''){
                    $.get("/addBaseInfo",_this.addItem,function (data) {
                        if (data.code=="200"){alert("新增缺陷成功")
                            _this.cleanobj(_this.addItem);
                            _this.dialogFormVisible1=false;
                            _this.loadpage();
                        }
                    })
                }else{
                    alert("缺陷名不能为空");
                }
            },
            addclose(){
                this.cleanobj(this.addItem);
            },
            cancealadd(){
                this.dialogFormVisible1 = false;
                this.cleanobj(this.addItem);
            },
            changeclose(){
                this.cleanobj(this.changeItem);
            },
            cancealchange(){
                this.dialogFormVisible2 = false;
                this.cleanobj(this.changeItem);
            },

            cleanobj(obj){
                for(var key in obj){
                     obj[key]='';
                }
            },
            checkIssueName(){
              var _this = this;
              if (this.addItem.issueName.trim()==""){
                  alert("缺陷名不能为空")
              }else{
                  $.get("/checkIssueName",{issueName:this.addItem.issueName},function (data) {
                      if (data.code=="200"){
                          alert("缺陷名不存在");
                      }else{
                          alert("缺陷名存在");
                          _this.addItem.issueName="";
                      }
                  })
              }
            },
            open(obj){
                console.log(obj);
                this.showIssue = obj;
                var planStartTime = this.formatDateForShow(this.showIssue.planStartTime);
                var planEndTime = this.formatDateForShow(this.showIssue.planEndTime);
                this.showIssue.planStartTime = planStartTime;
                this.showIssue.planEndTime = planEndTime;
                this.dialogFormVisible=true;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            formatDateForShow(a){
                let  data = a;
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            },
            formatDate(row) {
                // 获取单元格数据
                let data = row.planEndTime
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            },
            loadpage(){
                var _this = this;
                var items = this.searchItems;
                $.ajax({
                    type: "GET",
                    data: {
                        pageIndex: _this.currentPage, pageSize: _this.pageSize, planStartTime: items.planStartTime,
                        planEndTime: items.planEndTime,
                        projectName: items.projectName,
                        issueState: items.issueState
                    },
                    dataType: "json",
                    url: "/searchBaseInfoList",
                    success: function (data) {
                        console.log(data);
                        _this.tableData=data.object.pagelist;
                        _this.currentPage = data.object.pageindex;
                        _this.pageSize = data.object.pagesize;
                        _this.total = data.object.total;
                    }})
                    },
            loadProjects(){
                var _this = this
                $.get("/getAllProjects",function (data) {
                      console.log(data)
                    _this.projects=data.object;
                })
            },
            loadStates(){
                var _this = this
                $.get("/getAllStates",function (data) {
                    _this.states=data.object;
                })
            },
            loadIssues(){
                var _this = this
                $.get("/getAllIssues",function (data) {
                    _this.issues=data.object;
                })
            },
            loadIssueType(){
                var _this = this
                $.get("/getAllType",function (data) {
                    console.log(data)
                    _this.issueType=data.object;
                })
            },
            loadSeveritys(){
                var _this = this
                $.get("/getAllSeveritys",function (data) {
                    console.log(data)
                    _this.severitys=data.object;
                })
            },
            loadPrioritys(){
                var _this = this
                $.get("/getAllPrioritys",function (data) {
                    console.log(data)
                    _this.prioritys=data.object;
                })
            },
            delArray(){
                if (this.multipleSelection.length==0){
                    alert("没有删除项")
                }else{
                    var del=[];
                    for (var i=0;i<this.multipleSelection.length;i++){
                        del.push(this.multipleSelection[i].issueId);
                    }
                    console.log(del);
                    var _this = this;
                    $.ajax({
                        url:"/deleteTaskArray",
                        type:"post",
                        contentType:"application/json;charset=UTF-8",	//设置请求体内容为json数据
                        data:JSON.stringify(del),	//请求体的数据
                        dataType:"json",	//服务器端返回的数据当做json来解析
                        success:function (d) {
                            alert("删除成功");
                            _this.currentPage=1;
                            _this.loadpage();
                        }
                    })
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(val);
            },
            delTask(issueId){
                var _this = this;
                $.ajax({
                    url:"/delTask",
                    type:"post",
                    data:{issueId:issueId},
                    success:function (data) {
                        alert("删除成功");
                        _this.loadpage();
                    }
                })
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.loadpage();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.loadpage();
            }
                },
        mounted(){
            this.loadIssues();
            this.loadIssueType();
            this.loadSeveritys();
            this.loadPrioritys();
            this.loadStates();
            this.loadProjects();
            this.loadpage();
        }
    })
</script>

</body>
</html>